<template>
	<view class="container">
		<view class='form_unit'>
			<view class='form_label'>代金券标题</view>
			<view class='form_con'>
				<input type='text' placeholder="请输入名称" :value='coupon_name' data-name="coupon_name" @input='input_'/>
			</view>
		</view>
		<view class='form_unit'>
			<view class='form_label'> 面额<text style='color:#e03636'>*</text></view>
			<view class='form_con'>
				<input type="number" placeholder="输入面额" :value='price' data-name="price"  @input='input_'/>
			</view>
		</view>
		  <view class='form_unit'>
			<view class='form_label'>有效期至<text style='color:#e03636'>*</text></view>
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"  class="form_date">
			    <view class="uni-input">{{date}}</view>
			</picker>
		  </view>
		  <view class='form_unit' style='clear:both;'>
			<view class='form_label'>发券数量<text style='color:#e03636'>*</text></view>
			<view class='form_con'>
			  <input type='number' placeholder="请输入100的整数倍数" :value='number' data-name="number" @input='input_'/>
			</view>
		  </view>
		  <view class='title'>
		    <view class='input_label'>描述</view>
		    <view class="content">
		  	  <textarea class='textarea' maxlength="100" placeholder='请输入描述,不超过100字' :value="text" data-name="text" @input="input_"></textarea>
		  	  <view class="number">{{num}}/{{total}}</view>
		    </view>
		  </view>
		  <view class='form_unit1'>
			<view class='form_label' style=''>图片</view>
			<view class='form_con1'>
				<image class='photo_con_pic' v-if="imgurl!='0'"  mode='aspectFill' :src='imgurl'  v-on:click='upload_img'></image>
				<view class='photo_con' v-if="imgurl=='0'" v-on:click="upload_img">+</view>
			</view>
		  </view>
		  
		  <view class="body-view">
		  	发布状态：<switch :checked="switchs==1?true:false" @change="switchChange"/>
		  </view>
		  <view class="footer" v-on:click='send'>发布优惠券</view>
	</view>
</template>
<style>
	.container{width:100%;background: #FFFFFF !important;}
	.form_unit1{width:96%;margin: 10upx 2%;font-size:28upx;height: 150upx;display: flex;justify-content: flex-start;align-items: center;border-bottom:1px solid #F4F4F4;}
	.form_unit{width:96%;margin:0 2%;font-size:28upx;height: 80upx;display: flex;justify-content: flex-start;align-items: center;border-bottom:1px solid #F4F4F4;}
	.form_label{width:35%;height: 60upx;line-height: 60upx;font-size:28upx;}
	.form_con{width:65%;height: 60upx;line-height: 60upx;font-size:28upx;display: flex;justify-content: flex-start;align-items: center;}
	.form_con input,.uni-input{width: 90%;border:1px solid #e1e1e1;padding:0;border-radius: 10upx;padding-left:3%;height: 60upx;line-height: 60upx;}
	.radio-group{width:78%;height: 60upx;line-height: 60upx;font-size:28upx;display: flex;justify-content: flex-start;align-items: center;}
	radio{padding:0 15upx;}
	.form_date{width:65%;height: 60upx;line-height: 60upx;font-size:28upx;}
	.tag{display: flex;justify-content: space-between;align-items: center;background: #F4F4F4;}
	.body-view{  height: 70upx;  line-height: 70upx;  font-size:28upx; width:96%;  color:#282828;padding:0 2%;}
	.remark{line-height: 60upx;width: 96%;margin:10upx 2%;font-size:28upx;color:#282828;}
	.yy{font-size:24upx;color: #282828;line-height: 80upx;width:96%;margin:0 2%;height:80upx}
	.photo_con{height:150upx;line-height: 150upx;width:150upx;text-align: center;font-size:45rpx;
	           font-weight: bold;  border:1rpx solid #e1e1e1; border-radius: 10rpx;color:#ccc;overflow: hidden; }
	.photo_con_pic{height:150upx;width:150upx;}
	.picture{width: 29%; height:150rpx;margin-right: 3%; border:1rpx solid #eee;margin-bottom: 20rpx;border-radius: 10rpx;}
	.add{height:150rpx;width:29%; line-height: 150rpx;text-align: center;font-size:45rpx;font-weight: bold;border-radius: 10rpx;color:#ccc;margin-right: 3%;border:1rpx solid #eee;margin-bottom: 20rpx}
	.footer{width:90%;margin:20upx 5%;font-size: 30upx;height: 80upx;position: fixed;bottom:0;left:0;
			border-radius: 50upx;background-image: linear-gradient(#43eac9, #24c3a4);color: #FFFFFF;text-align: center;line-height: 80upx;}
			
	.title{width:94%;padding:10rpx 3%;display: flex;justify-content:space-between;}
	.input_label{width:30%;height:50rpx;line-height: 50rpx;font-size:26rpx;}
	.content{width:74.5%;display: flex;flex-direction: column;}
	.textarea{width:95.5%;border-radius: 10rpx;font-size: 24rpx;line-height: 30rpx;color: #282828;height:150rpx;border:1px solid #d1d1d1;padding: 10rpx 2%;z-index: 1;}
	.number{width:100%;height:50upx;line-height: 50upx;font-size: 28upx;color: #393939;text-align: right;}
</style>
<script>
	export default {
		data() {
			const currentDate = this.getDate({format: true});
			return {
				date: currentDate,
				coupon_name:'',
				text:'',
				price:'',
				number:0,
				imgurl:'0',
				coupon_id:0,
				num:0,
				total:100,
				switchs:1,
				url: getApp().globalData.url,
				img_url:getApp().globalData.static
			}
		},
		onLoad(options) {
			var res = uni.getSystemInfoSync();
			var w   = res.windowWidth * 94 / 100 * 31 / 100;
			if(options.id!='0')
			{
				uni.setStorageSync("coupon_id",parseInt(options.id));
				this.initialize();
			}
			else
			{
				uni.setStorageSync("coupon_id",0);
			}
		},
		onShow(){
			var tmp = uni.getStorageSync("coupon_tag");
			if(tmp=='0')
			{
				this.num = 0;
			}
			else
			{
				this.num = tmp.split(",").length;
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			switchChange:function(e)
			{
				if(e.detail.value)
				{
					this.switchs = 1;
				}
				else
				{
					this.switchs = 0;
				}
			},
			initialize:function()
			{
				var coupon_id = uni.getStorageSync("coupon_id");
				var that = this;
				uni.request({
					url: this.url+'/wechat_find_store_coupon', 
					data: {coupon_id:coupon_id},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						console.log(res.data);
						if(res.data.status==1)
						{
							that.coupon_name = res.data.result[0].coupon_name;
							that.text        = res.data.result[0].desc;
							that.price       = res.data.result[0].coupon_denomination;
							that.date        = res.data.result[0].end_time;
							that.number      = res.data.result[0].coupon_stock;
							that.switchs     = res.data.result[0].coupon_status;
							
							if(res.data.result[0].coupon_imgurl!="0")
							{
								that.imgurl  = that.url+res.data.result[0].coupon_imgurl;
							}
						}
					}
				});	
			},
			upload_img:function()
			{
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths[0]));
						that.imgurl = res.tempFilePaths[0];
						that.upload_file();
					}
				});
			},
			upload_file:function()
			{
				var store_id = uni.getStorageSync("store_id");
				var coupon_id = uni.getStorageSync("coupon_id");
				if(coupon_id>0)
				{
					
				}
				else
				{
					coupon_id = 0;
				}
				var that = this;
				uni.showLoading({
					title:"上传中",
					mask:true,
					success:(res)=>{
						uni.uploadFile({
							url:that.url+'/wechat_upload_coupon', 
							filePath:that.imgurl,
							name:'file',
							formData:{id:coupon_id,store_id:store_id},
							success:(res)=>{
								uni.hideLoading();
								console.log(res.data);
								var result = JSON.parse(res.data);
								uni.setStorageSync("coupon_id",result.id);
								uni.showToast({
									title:'图片上传成功',
									duration:1000
								})
							}
						})
					}
				})
			},
			send:function()
			{
				var coupon_id   = uni.getStorageSync("coupon_id");
				if(coupon_id=="")
				{
					coupon_id = 0;
				}
				var store_id    = uni.getStorageSync("store_id");
				var that = this;
				var data = {};
				if(this.coupon_name=='')
				{
					uni.showToast({
						title:'券名不能为空',
						duration:1000
					})
				}
				else if(this.price=='')
				{
					uni.showToast({
						title:'金额不能为空',
						duration:1000
					})
				}
				else if(this.number==0)
				{
					uni.showToast({
						title:'数量不能为空',
						duration:1000
					})
				}
				else if(this.text=='')
				{
					uni.showToast({
						title:'描述不能为空',
						duration:1000
					})
				}
				else
				{
					data.store_id    = store_id;
					data.coupon_id   = coupon_id;
					data.coupon_name = this.coupon_name;
					data.coupon_denomination = this.price;
					data.end_time    = this.date;
					data.coupon_status = this.switchs;
					data.coupon_stock  = this.number;
					data.desc        = this.text;
					data.imgurl      = this.imgurl;
					// console.log(data);return;
					that.send_submit(data);
					// uni.showModal({
					// 	title:"发布操作",
					// 	content:"有客户领取后将不能被修改，确认发布？",
					// 	success: (res) => {
					// 		if(res.confirm)
					// 		{
								
					// 		}
					// 	}
					// })
					// this.send_submit(data);
				}
			},
			send_submit:function(data)
			{
				uni.request({
					url: this.url+'/wechat_add_coupon', 
					data: data,
					method:"POST",
					header: {'Content-Type': 'application/x-www-form-urlencoded'},
					success: (res) => {
						console.log(res.data);
						if(res.data.status==1)
						{
							uni.removeStorageSync("coupon_id");
							// uni.removeStorageSync("coupon_tag");
							uni.showToast({
								title:'发布成功',
								duration:3000
							});
							uni.redirectTo({
								url:'/pages/member/coupon_list'
							})
						}
						else
						{
							uni.showToast({
								title:'系统忙',
								icon:'none',
								duration:3000
							})
						}
					}
				});	
			},
			input_:function(e)
			{
				
				if(e.currentTarget.dataset.name=="text")
				{
					this.text = e.target.value;
				}
				if(e.currentTarget.dataset.name=="coupon_name")
				{
					this.coupon_name = e.target.value;
				}
				if(e.currentTarget.dataset.name=="price")
				{
					this.price = e.target.value;
					this.integral = parseInt(e.target.value)*10;
				}

				if(e.currentTarget.dataset.name=="number")
				{
					this.number = e.target.value;
				}
			},
			bindDateChange: function(e) 
			{
				this.date = e.target.value
			},
			getDate(type) 
			{
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>